<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项singleAxis-单轴</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1 {
      width: 1000px;
      height: 650px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));
    const hours = [
      '12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'
    ]
    const days = [
      'Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'
    ]
    // 随机生成数据(二维数组 [ [0, 6], [1, 2], [2, 4] ])
    function random () {
      let result = []
      for (let i = 0; i < 24; i++) {
        result.push([i, Math.round(Math.random() * 10)])
      }
      return result
    }
    myChart1.setOption({
      title: {
        text: 'Saturaday'
      },
      tooltip: {},
      singleAxis: {
        type: 'category',
        data: hours,
        boundaryGap: false,
        axisLabel: {
          interval: 2
        },
      },
      series: {
        type: 'scatter',
        coordinateSystem: 'singleAxis',
        data: random(), // 二维数组格式为[ [0, 6], [1, 2], [2, 4] ]第一个就是单轴上的值，第二个是气泡的半径
        symbolSize (val) {
          return val[1] * 4 // 让气泡大一些
        },
      }
    })
    console.log(54, myChart1.getOption())
  </script>
</body>

</html>